/*
* name: zoom.js
* version: v1.3.0
* update: 放大镜只作用在图片区域内，支持动态换图;
* date: 2014-12-05
*/
define(function(require, exports, module) {
	require('./zoom.css');
	var $ = require('jquery'),
		ready = require('img-ready'),
		MouseEvent = function(e) {this.x = e.pageX;this.y = e.pageY;};
	$.fn.zoom = function(config) {
		var $this = $(this);
		if(!$this.length ) return;
		var opt = {
				zoomWidth: $this.outerWidth(),
				zoomHeight: $this.outerHeight(),
				offset: 10,
				offsetTarget:null,
				position: "right",
				preload: true
			},
			imageLeft, imageTop, imageWidth, imageHeight, imagePaddingTop, imagePaddingLeft,
			bigimage, bigwidth, bigheight, dragzoom;	
		$.extend(opt, config || {}, $this.data('config') || {} );
		if($this.css('position')!=='absolute' || $this.css('position')!=='fixed') {
			$this.css('position','relative');
		};
		if(!$('#zoomdiv').length){
			$('body').append('<div class="zoomdiv" id="zoomdiv"></div>');
		};
		
		dragzoom = function(e) {
			var mouse = new MouseEvent(e),
				scalex = (bigwidth / imageWidth),
				scaley = (bigheight / imageHeight),
				xpos = (mouse.x - $("div.jqZoomPup").outerWidth() / 2 < imageLeft) ? 0 + imagePaddingLeft : 
					(mouse.x + $("div.jqZoomPup").outerWidth() / 2 > imageWidth + imageLeft) ? (imageWidth - $("div.jqZoomPup").outerWidth() + imagePaddingLeft) : 
					mouse.x - $("div.jqZoomPup").outerWidth() / 2 - imageLeft + imagePaddingLeft,
				ypos = (mouse.y - $("div.jqZoomPup").outerHeight() / 2 < imageTop) ? 0 + imagePaddingTop : 
					(mouse.y + $("div.jqZoomPup").outerHeight() / 2 > imageHeight + imageTop) ? (imageHeight - $("div.jqZoomPup").outerHeight() + imagePaddingTop) : 
					mouse.y - $("div.jqZoomPup").outerHeight() / 2 - imageTop + imagePaddingTop;
			$this.find(".jqZoomPup").css({
				width:(opt.zoomWidth) /scalex,
				height:(opt.zoomHeight) / scaley,
				top: ypos,
				left: xpos
			});
			$("div#zoomdiv").scrollTop((ypos-imagePaddingTop) * scaley)
			.scrollLeft((xpos-imagePaddingLeft) * scalex);
		};
		// 准备变量
		var offsetTarget = $(opt.offsetTarget).length ? $(opt.offsetTarget) : $this,
			offsetWidth = offsetTarget.outerWidth(),
			offsetLeft = offsetTarget.offset().left,
			offsetTop = offsetTarget.offset().top;
		
		// 大图位置
		if (opt.position == "right") {
			if (offsetLeft + offsetWidth + opt.offset + opt.zoomWidth > screen.width) {
				leftpos = offsetLeft - opt.offset - opt.zoomWidth;
				if(window.console){
					console.log('zoom.js: element["'+$this.attr('class')+'"] automatically positioned to the left.')
				}
			} else {
				leftpos = offsetLeft + offsetWidth + opt.offset;
			}
		} else {
			leftpos = offsetLeft - opt.zoomWidth - opt.offset;
			if (leftpos < 0) {
				leftpos = offsetLeft + offsetWidth + opt.offset;
			}
		};
		function bindBigImg(){
			ready(bigimage,function(w,h){
				// get img size
				bigwidth = w;
				bigheight = h;
				$("div#zoomdiv").find('img').css({
					"width" : bigwidth,
					"height" : bigheight,
					"maxWidth" : "none"
				});
				$('body').bind("mousemove",dragzoom);
			});	
		};
		// 绑定事件
		$this.on('mouseenter','img',function() {
			var Original = $(this);
			if(Original.length!==1) return;
			bigimage = Original.attr("zoom") ? Original.attr("zoom") : Original.attr("src");
			imagePaddingTop = Original.offset().top - $this.offset().top;
			imagePaddingLeft = Original.offset().left - $this.offset().left;
			if (!$this.find('.jqZoomPup').length) {
				$this.append("<div class='jqZoomPup'>&nbsp;</div>");
			};
			$this.find(".jqZoomPup").show();
			$("div#zoomdiv").css({
				"display":"block",
				"top" : offsetTop,
				"left" : leftpos,
				"width" :opt.zoomWidth,
				"height" :opt.zoomHeight
			}).html('<img src="'+ bigimage +'"/>');

			ready(Original.attr('src'),function(w,h){
				imageLeft = Original.offset().left;
				imageTop = Original.offset().top;
				imageWidth = Original.width();
				imageHeight = Original.height();
				bindBigImg();
			});					
		}).on('mouseleave',function() {
			$(this).find(".jqZoomPup").hide();
			$('body').unbind("mousemove",dragzoom).find("div#zoomdiv").hide();
		});
		if (opt.preload && $this.find("img").attr("zoom")) {
			var imagetopreload = $this.find("img").attr("zoom"), preloadImg = new Image();
			preloadImg.src = imagetopreload;
		};
		return $this;
	}	
});